<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 创建refs数组来保存图片元素的引用
const imageRefs = ref([] as any[])
// 记录当前被点击的图片索引，初始化为 -1表示没有图片被点击
const currentClickedIndex = ref(-1)
// 用于记录每个图片所在div的显示隐藏状态，初始化为都显示（true表示显示）
const imageWrappersVisible = ref([] as boolean[])

// 在组件挂载后获取图片元素并添加到refs数组
onMounted(() => {
  const images = document.querySelectorAll('img')
  const imageWrappers = document.querySelectorAll('.image-wrapper')
  // 初始化imageWrappersVisible数组，根据图片数量设置初始值为true（都显示）
  for (let i = 0; i < imageWrappers.length; i++) {
    imageWrappersVisible.value.push(true)
  }
  images.forEach((img, index) => {
    imageRefs.value.push(img)
    img.addEventListener('click', () => handleImageClick(index))
  })
})

const handleImageClick = (clickedIndex: number) => {
  const imageWrappers = document.querySelectorAll('.image-wrapper')
  const textContainers = document.querySelectorAll('.text-container') // 假设描述文字的容器类名为 .text-container

  if (currentClickedIndex.value === clickedIndex) {
    // 如果再次点击了当前已点击的图片，进行复原操作
    imageWrappers.forEach((wrapper, index) => {
      if (index === clickedIndex) {
        const img = wrapper.querySelector('img')
        img?.classList.remove('move-left')
      }
      ;(wrapper as HTMLElement).style.display = 'block'
      imageWrappersVisible.value[index] = true
    })
    textContainers.forEach(container => {
      ;(container as HTMLElement).style.display = 'none' // 隐藏所有描述文字
    })
    currentClickedIndex.value = -1 // 重置当前点击索引
  } else {
    imageWrappers.forEach((wrapper, index) => {
      if (index === clickedIndex) {
        const img = wrapper.querySelector('img')
        img?.classList.add('move-left')
      } else {
        ;(wrapper as HTMLElement).style.display = 'none'
        imageWrappersVisible.value[index] = false
      }
    })
    textContainers.forEach((container, index) => {
      if (index === clickedIndex) {
        ;(container as HTMLElement).style.display = 'block' // 只显示被点击图片对应的描述文字
      } else {
        ;(container as HTMLElement).style.display = 'none'
      }
    })
    currentClickedIndex.value = clickedIndex // 更新当前点击索引
  }
}
// 文字数组
const textarray = [
  '毛泽东（1893年12月26日—1976年9月9日），字润之，湖南湘潭韶山冲人，伟大的马克思主义者，伟大的无产阶级革命家、战略家、理论家和诗人,。自1945年起任中共中央主席和中共中央军委主席，成为中共中央主要负责人，1949年起终身担任中华人民共和国最高领导人，是中国人民解放军、中华人民共和国的重要缔造者及中共第一代领导集体的核心。',
  '周恩来（1898年3月5日—1976年1月8日），字翔宇，曾用名飞飞、伍豪、少山、冠生等 ，原籍浙江绍兴，1898年3月5日生于江苏淮安。1921年加入中国共产党，是伟大的马克思主义者，伟大的无产阶级革命家、政治家、军事家、外交家，党和国家主要领导人之一，中国人民解放军主要创建人之一，中华人民共和国的开国元勋，是以毛泽东同志为核心的党的第一代中央领导集体的重要成员。',
  '叶挺（1896年9月10日—1946年4月8日），原名叶为询，字希夷，广东惠州府归善县客家人，为北伐名将，亦为中国人民解放军创始人之一。八一南昌起义前敌总指挥，新四军军长。叶挺先后在广东陆军小学、武昌陆军第二预备学校和保定陆军军官学校毕业，后参加建国粤军，参与粤桂战争，任工兵营副营长。1921年，调任孙中山之建国陆海军大元帅府警卫团第二营营长。1924年，他加入中国共产党。1925年起，他历任国民革命军第四军参谋处处长、第十二师第三十四团团长、叶挺独立团团长，参加北伐战争；之后担任第二十五师副师长，第十一军第二十四师师长。1927年，叶挺参与指挥南昌起义和广州起义。抗日战争爆发后叶挺曾任新四军军长，皖南事变时被俘。1946年，叶挺获释后重新加入中共，随后因飞机失事遇难。'
]
</script>
<template>
  <div class="my-area my-row">
    <!--人物传记-->
    <div class="my-area my-col-md-12">
      <!--大文章部分-->
      <div class="my-container" style="height: 100%">
        <div class="my-area my-row">
          <div style="display: flex; margin: 30px 0" class="my-col-md-12">
            <!--介绍-->
            <div class="my-col-md-12 photo_border" style="margin: 10px 30px">
              <div
                class="my-col-md-4 photo image-container image-wrapper"
                style="margin: 10px 40px">
                <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
                <a href="#">
                  <img src="../assets/107毛泽东主席.jpg" style="width: 100%; height: auto" />
                </a>
                <div class="text-container">
                  {{ textarray[0] }}
                </div>
                <!-- <h4 style="text-align: center" class="text-overlay">毛泽东</h4> -->
              </div>
              <div
                class="my-col-md-4 photo image-container image-wrapper"
                style="margin: 10px 40px">
                <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
                <a href="#">
                  <img src="../assets/108周恩来总理.jpg" style="width: 100%; height: auto" />
                </a>
                <div class="text-container">
                  {{ textarray[1] }}
                </div>
                <!-- <h4 style="text-align: center" class="text-overlay">周恩来</h4> -->
              </div>
              <div
                class="my-col-md-4 photo image-container image-wrapper"
                style="margin: 10px 40px">
                <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
                <a href="#">
                  <img src="../assets/109叶挺将军.jpg" style="width: 100%; height: auto" />
                </a>
                <div class="text-container">
                  {{ textarray[2] }}
                </div>
                <!-- <h4 style="text-align: center" class="text-overlay">叶挺</h4> -->
              </div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@import '@/modules/moules1/modules1_BigRevelution/assets/main.css';
</style>
<style scoped>
.image-container {
  /* position: relative; */
  /* 设置为相对定位 */
  display: inline-block;
  /* 或者block，根据需要 */
}
/* 了解更多 */
.note {
  display: inline-block;
  color: #d3d3d3;
  font-weight: lighter;
  position: absolute;
  right: 0;
}
.note:hover {
  color: black;
}
/* 文字 */
.text-overlay {
  color: black;
}

/*照片框*/
.photo_border {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  height: 100%;
}

.border {
  /* border: 1px solid #D3D3D3; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  /* 平滑过渡效果 */
  transform: translateY(0);
  /* 初始状态，不移动 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 普通状态下轻微阴影 */
  margin: 10px 0;
}
/* 动态特效 */
.move-left {
  animation: moveLeft 0.5s ease-in-out forwards;
}

@keyframes moveLeft {
  from {
    transform: translateX(0);
  }
  to {
    /* 假设元素的初始位置在容器的右侧边缘 */
    /* 移动距离为容器宽度减去元素宽度 */
    transform: translateX(-10%); /* 或者 calc(-100% + EW) */
  }
}
.image-wrapper {
  display: block;
}
/* 文字描述 */
.text-container {
  display: none; /* 默认隐藏 */
  position: absolute;
  right: 100px;
  top: 100px;
  width: 50%; /* 根据需要调整宽度 */
  height: auto;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* z-index: 10; */
}
</style>
